import React, { useState } from 'react'
import '../../styles/app.scss'
import { withRouter, NavLink, Switch, Redirect, Route, Router } from 'react-router-dom';
import Son from './Son'
const App = (props) => {
    const arr = [
        {
            name: '谢依霖',
            touxian: '特级教师',
            home: '成都嘉祥七中外国语学校',
            text: [
                '从生物圈到细胞',
                '生命活动的主要承担者蛋白',
                '细胞的多养护',
                '基因片段中的DNA'
            ]
        },
        {
            name: '李晓欣',
            touxian: '一级教师',
            home: '北京二十四中',
            text: [
                '从百草园杀到三味书屋',
                '盐类的水解',
                '弱电解质的碘离子',
                '雷电法王'
            ]
        },
        {
            name: '展博地',
            touxian: '一级教师',
            home: '爱森公寓',
            text: [
                '蹲起and高数题',
                '5000亿年前的赛博坦',
                '啊，婉瑜',
                '转行作反派'
            ]
        },
        {
            name: '石羊',
            touxian: '一级教师',
            home: '唐山一中',
            text: [
                '新课题标称',
                '语法上的常见错误',
                '刺客，大美将至',
                '有奇才，快来抓奇才'
            ]
        },

    ]
    const [data,setData] = useState('')
    const Click = (index) => {
        props.history.push('/son')
        setData(arr[index])
    }
    console.log(props)
    return (
        <div className='box'>
            <h2>
                全国名师指导
            </h2>
            <ul>
                {
                    arr.map((item, index) => {
                        return (
                            <li key={index} onClick={() => Click(index)}>
                                <div className='top'>
                                    <p>
                                        {item.name}
                                    </p>
                                    <p>
                                        {item.touxian}
                                    </p>
                                    <p>
                                        {item.home}
                                    </p>
                                    <p className='top-top'>
                                        {item.touxian}
                                    </p>
                                </div>
                                <div className='bot' >
                                    {
                                        item.text.map((item2, index2) => {
                                            return (
                                                <p key={index2}>
                                                    {item2}
                                                </p>
                                            )
                                        })
                                    }
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
            <Son data={data}></Son>
        </div>
    )
}
export default App